<template>
  <div class="Mini">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>房型管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/index/edit_goods' }">Mini吧设置</el-breadcrumb-item>
      <el-breadcrumb-item>维护分类</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="deparment-setting  easy-content">
      <el-form>
        <el-form-item style="margin-bottom: 20px;">
          <el-button type="primary"
            size="small"
            style="float: right;"
            @click="addType">增加分类</el-button>
        </el-form-item>
        <el-form-item>
          <el-tree :data="typeList"
            :props="defaultProps"
            node-key="id"
            :renderContent="renderContent"
            :expand-on-click-node="false"
            default-expand-all>
          </el-tree>
        </el-form-item>
      </el-form>
    </div>
    <div class="add-update-pouple"
      v-if="isShow">
      <el-form label-width="80px"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm">
        <div class="content">
          <div class="title">{{title}}</div>
          <el-form-item label="编号"
            prop="number">
            <el-input type="text"
              placeholder="请输入编号"
              v-model="ruleForm.number" maxlength="8"></el-input>
          </el-form-item>
          <el-form-item label="分类名称"
            prop="name">
            <el-input type="text"
              placeholder="请输入分类名称"
              v-model="ruleForm.name"
              maxlength="8"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click.native="_addEditGoods('ruleForm')"
              type="primary"
              size="small">确定</el-button>
            <el-button @click.native="isShow = false"
              size="small">取消</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import { deleteDept } from "../../../public/js/setting";
import {
  getTypeList,
  getGoodsList,
  updateGoodsState,
  deleteType,
  addEditType
} from "@/public/js/goods.js";
export default {
  name: "DepartmentSetting",
  data() {
    var validateNum = (rule, value, callback) => {
      let re = /^[0-9]+$/;
      if (value == "" || value == null) {
        callback(new Error("请输入分类编号"));
      } else if (!re.test(value)) {
        callback(new Error("请您输入正确的格式(数字)"));
      } else {
        callback();
      }
    };
    return {
      typeList: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      label: "增加分类",
      ruleForm: {
        id: "",
        number: "",
        name: "",
        upType: ""
      },
      title: "新增分类",
      isShow: false,
      //
      rules: {
        number: [
         { validator: validateNum, trigger: "blur",required:true }
        ],
        name: [
          {
            required: true,
            message: "请输入分类名称",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {},
  mounted() {
    this._getTypeList();
  },
  methods: {
    // 获取类型列表 （左侧导航条）
    _getTypeList() {
      getTypeList().then(res => {
        this.typeList = res.data.data;
      });
    },

    // 新增修改分类
    _addEditGoods(formName) {
      console.log(this.ruleForm);
      this.$refs[formName].validate(valid => {
        if (valid) {
          addEditType(this.ruleForm).then(res => {
            if (!res.data.errCode) {
              this.$message({
                type: "success",
                message: "操作成功"
              });
              this.isShow = false;
              this._getTypeList();
            }
          });
        } else {
          return false;
        }
      });
    },
    addType() {
      this.ruleForm = {
        id: "",
        number: "",
        name: "",
        upType: ""
      };
      this.title = "增加分类";
      this.isShow = true;
    },
    addSubType(data) {
      this.ruleForm = {
        id: "",
        number: "",
        name: "",
        upType: data.id
      };
      this.title = "增加子分类";
      this.isShow = true;
    },
    edit(data) {
      this.ruleForm = {
        id: data.id,
        number: data.number,
        name: data.label,
        upType: ""
      };
      this.title = "修改";
      this.isShow = true;
    },
    remove(data) {
      this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteType({
            id: data.id
          }).then(res => {
            if (res.data.errCode === 0) {
              this.$message.success("分类删除成功");
              this._getTypeList();
            }
          });
        })
        .catch(() => {});
    },
    renderContent(h, { node, data, store }) {
      return (
        <span class="node-tyle">
          <span>
            <span>{node.data.label}</span>
          </span>
          <span>
            <el-button
              style="font-size: 12px;"
              type="text"
              on-click={() => this.addSubType(data)}
            >
              添加子分类
            </el-button>
            <el-button
              style="font-size: 12px;"
              type="text"
              on-click={() => this.edit(data)}
            >
              修改
            </el-button>
            <el-button
              style="font-size: 12px;"
              type="text"
              on-click={() => this.remove(data)}
            >
              删除
            </el-button>
          </span>
        </span>
      );
    }
  }
};
</script>
<style lang="scss">
.Mini {
  position: relative;
  .deparment-setting {
    position: relative;

    .el-tree-node__content {
      height: 50px;
      border-bottom: 1px solid #edf0f9;
    }
  }
  .node-tyle {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    padding-right: 8px;
    color: #415161;
    .el-button--text {
      color: #415161;
    }
  }
  .node-tyle:hover {
    background-color: #f5f7fc;
  }
  .add-update-pouple {
    position: absolute;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 1111;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
    padding: 15px;
    .content {
      width: 20%;
      .title {
        font-size: 16px;
        font-weight: bold;
        padding-bottom: 20px;
      }
    }
  }
}
</style>



